.box{
	width: 200px;
	height: 200px;
	border: 1px solid palegreen;
	text-align:center;
	font-size:32px;
	/* 浮动float:left(左浮动)/right(右浮动)/none(默认值不浮动 */)
	float:none;
}
.box2{
	width: 700px;
	height: 240px;
	border: 1px solid red;
}
/* 第一种清楚浮动的方法： */
.clear{
	/* 清除两端浮动 */
	clear: both;
}
/* 第二种清除浮动的方法 */
.bigbox{
	/* overflow: hidden; */
}
/* after：在...之后 */
/* 第三种清除浮动的方法：给父级元素添加after伪类 */
.clearfix::after{  /* 伪类：在clearfix类的后面*/
	content:"" ;  /* 内容：空*/
	display: block;  /* 将伪类转化为块元素*/
	height: 0;
	clear: both;  /* 清除两端浮动*/
	visibility: hidden;  /* 显示状态：隐藏*/
}
/* 第四类清除浮动的方法：给父级元素添加双伪元素 */
.clearfix::before,.clearfix::after{
	content: "";
	display: table;
}
.clearfix::after{
	clear: both;
}

/* 浮动的特性:
1.浮动的盒子会脱离标准流(脱标);
2.浮动的盒子一行内显示并且顶端对齐，一行装不下会另起一行
3.浮动的盒子具有和行内块元素类似的特性
 */
/* 消除浮动的方法：
 1.额外标签法：隔墙法，不建议使用
 2.给父级元素添加overflow:hidden元素
 3.给父级元素添加双伪元素
 4.浮动的盒子具有和行内块元素类似的特性
 */